<template>
	<div style="padding:0 37px 0 44px">
		<div class="breadcrumb-father">
      <div class="new-breadcrumb">
		<router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
          <span>{{$t('index.approval')}}</span>
        <span class="arrow">></span>
          <span>{{$t('firm.companyApproval')}}</span>
      </div>
    </div>

		<div class="card-table">
			<div class="card-table-title">
				<svg aria-hidden="true" class="svg-icon svg-title-icon">
		          <use xlink:href="#icon-firm"></use>
		        </svg>
				<span>{{$t('firm.companyApproval')}}</span>
			</div>
			<div class="table-border">
				<el-table border :data="firmAuditDatas" @cell-mouse-enter="showHandle" @cell-mouse-leave="hiddenHandle" height=500 v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
					<el-table-column type="index" :label="$t('index.Number')" width="80"></el-table-column>
					<el-table-column prop="name" :label="$t('firm.name')" class-name="title_name"></el-table-column>
					<el-table-column prop="address" :label="$t('agent.Address')"></el-table-column>
					<el-table-column prop="parentDistributorName" :label="$t('firm.agent')"></el-table-column>
					<el-table-column prop="remarks" :label="$t('mer.ApprovalItem')" :formatter="firmState"></el-table-column>
					<el-table-column fixed="right" class-name="handle-hidden-1 animate_td">
					    <template slot-scope="scope">
		                  <a class="svg-link-class" @click="showFirmDetails(scope.row.firmId,scope.row.remarks,scope.row.name)">
		                    <svg aria-hidden="true" class="svg-icon svg-action-icon">
		                      <use xlink:href="#icon-shenhe"></use>
		                    </svg>
		                  </a>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="searchFirmData.page" :page-sizes="[15,20,30,50]" :page-size="searchFirmData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		</div>

	</div>
</template>

<script>
import { firmAuditAll } from 'api/firm/index';
export default{
	name:'firmAudit',
	data(){
		return{
			companyId:localStorage.getItem('companyId'),
			tableIndex: null,
			firmAuditDatas:[],//后台返回的待审核公司数据
			res:[],//分页 数据总条数
			searchFirmData:{//查询参数
				page: 1,
				pageSize: 15,
			},
			oldPage: null,
			loading: true,
		}
	},
	watch:{
	  'searchFirmData.page':function(newVal,oldVal){
	      this.oldPage = oldVal;
	  },
	},
	created(){
		if(localStorage.getItem('searchFirmData')){
			this.searchFirmData = JSON.parse(localStorage.getItem('searchFirmData'));
		}

		this.firmAuditList(this.searchFirmData);
	},
	methods:{
		//获取待审核代理商列表
		firmAuditList(value,str){
			
			const _that = this;

			_that.loading = true;

			if( str == 'CurrentChange' ){
			  // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
			  let obj = $('.el-pager .number');
			  for( let i = 0; i < obj.length; i++){
			      if($(obj[i]).html() == this.oldPage) {
			        $(obj[i]).addClass('active');
			      } else {
			        $(obj[i]).removeClass('active');
			      }
			  }
			}

			value.companyId = this.companyId;
			firmAuditAll(value).then(res=>{
				this.firmAuditDatas = res.value.list;
				this.res = res.value;

				// 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
				if( str == 'CurrentChange' ){
				  let obj = $('.el-pager .number');
				  for( let i = 0; i < obj.length; i++){
				      if($(obj[i]).html() == this.searchFirmData.page) {
				        $(obj[i]).addClass('active');
				      } else {
				        $(obj[i]).removeClass('active');
				      }
				  }
				}

				setTimeout(function (param) { 
				  const td_last_child = $(".el-table__body-wrapper tr td:last-child");
				  for(let i=0;i<td_last_child.length;i++){
				    $(td_last_child[i]).removeClass('handle-hidden-1');
					}
					
					const title_name_arr = $(".el-table__body-wrapper .title_name .cell");
					for(let j = 0;j<title_name_arr.length;j++){
						$(title_name_arr[j]).attr('title',$(title_name_arr[j]).html());
					}

					_that.loading = false;
					
				},500)
			})
		},

		showHandle(row, column, cell, event) {
		    for(let i = 0;i<this.firmAuditDatas.length;i++){
		        if(this.firmAuditDatas[i].firmId === row.firmId){
		        	this.tableIndex = i;
		        	const table_row = $(".el-table__fixed-right").find('.el-table__row')[i];
		        	$(table_row).find('td:last').removeClass('handle-hidden-1');
		        	// $(".animate_td .cell").css("right","-120px");

		        	$(".el-table__fixed-right").addClass("fixed-column-1");
		          	// 判断项目数目是否导致滚动条出现
		        	if(this.firmAuditDatas.length <= 15){
						$(".el-table__fixed-right").addClass("right-zero");
				    }else{
				  		$(".el-table__fixed-right").removeClass("right-zero");
				    }

		          	$(".el-table__fixed-right").css("z-index","22");
		          	var action_div = $(table_row).find('td:last').children("div");
		          	$(action_div).stop().animate({"right": "0"});
		        }
		    }
		},
		hiddenHandle(row, column, cell, event) {
			const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
			$(".el-table__fixed-right").css("z-index","0");
			var action_div = $(table_row).find('td:last').children("div");
			$(action_div).stop().animate({"right": "-120px"});
		},
		firmState(row) {
			let remark = row.remarks;
			if(remark === '0' ){
				return remark = this.$t("mer.Registration");
			}else if(remark === '1' ){
				return remark = this.$t("mer.Amendment");
			}
		},
		// 判断字符串长度的方法
		getStrL(str){
			let l = str.length; 
			let blen = 0; 
			for(let i=0; i<l; i++) { 
				if ((str.charCodeAt(i) & 0xff00) != 0) { 
					blen ++; 
				} 
				blen ++;
			}
			return blen;
		},

		//进入子组件 显示子组件详情
		showFirmDetails(firmId,remarks,name){
			// this.companyId = firmId;
			localStorage.setItem('searchFirmData',JSON.stringify(this.searchFirmData));
			this.$router.push({ path: "/firmAuditDetails",query:{ firmId:firmId, remarks:remarks,name:name } });
		},

		//pageSize 改变时会触发
		handleSizeChange(val){
			this.searchFirmData.pageSize = val;
			this.firmAuditList(this.searchFirmData);
		},
		//currentPage 改变时会触发
		handleCurrentChange(val){
			this.searchFirmData.page = val;
			this.firmAuditList(this.searchFirmData,'CurrentChange');
		}
	}
}
</script>

<style>
</style>